<template>
    <div class="login">
        <el-card class="box-card">
            <div class="box-card-header" slot="header" >
                <span>通用后台管理系统</span>
            </div>
            <el-form ref="form" label-width="80px" :model="form" :rules="rules">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="form.password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="login()">登录</el-button>
                </el-form-item>
            </el-form>
        </el-card>

    </div>
</template>
<script>
import { nameRule, passRule } from "../utils/validate.js";
import { setToken } from "../utils/setToken.js"
import { login } from "@/api/api.js"
export default {
    data() {

        return {
            form: {
                username: '',
                password: ''
            },
            rules: {
                username: [{ validator: nameRule, trigger: 'blur' }],
                password: [{ validator: passRule, trigger: 'blur' }]
            }
        }
    },
    methods: {
        login() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    console.log(this.form)
                    login(this.form).then(res => {
                        //把登录页面封装为api进行调用
                        if (res.data.status === 200) {
                                    setToken('username', res.data.username)
                                    setToken('token', res.data.token)
                                    this.$message({ message: res.data.message, type: 'success' })
                                    this.$router.push("/home")
                                }
                    })

                } else {
                    console.error(this.form)
                }
            })
        }

    }
}
</script>

<style scoped>
.login {
    width: 100%;
    height: 100%;
    position: absolute;
    background:url('../assets/logo.png') center no-repeat;

    .box-card-header{
        text-align: center;
        font-size: 34px;
    }
    .box-card {
        width: 450px;
        margin: 200px auto;
        background: #65768557;
    }
}
</style>